import React, {useState, useEffect, useRef} from 'react'
import { Button, Modal, Form, Input, Select, Checkbox, message } from 'antd'
import Icon from '@components/icon';
import http from '@utils/http'
import classnames from 'classnames';
import DayPicker from './dayPicker';
import '../styles/createAccountModal.less'

const { TextArea } = Input;

const CreateAccountModal = (props) => {
  const [open, setOpen] = useState(false);
  const [selectedValue, setSelectedValue] = useState(null);
  const [billDate, setBillDate] = useState(null);
  const [dueDate, setDueDate] = useState(null);

  const [selectList, setSelectList] = useState([
    { value: 1, icon: 'no1', label: '现金' },
    { value: 2, icon: 'no2', label: '银行活期' },
    { value: 3, icon: 'no3', label: '微信' },
    { value: 4, icon: 'no4', label: '支付宝' },
    { value: 5, icon: 'no5', label: '其他资金' },
  ])

  const formRef = useRef();

  useEffect(() => {
    http.get('subclass', {
      id: props.id
    }).then(res => {
      setSelectList(res.data)
    })
  }, [])

  const onClose = () => {
    Modal.destroyAll()
  }

  const onSubmit = () => {
    formRef.current.validateFields().then((values) => {
      console.log(values)
      http.post('createAccount', {...values, assetId: props.id}).then(res => {
        console.log(res)
        if (res.code === 200) {
          message.success('操作成功')
          props.onSuccess && props.onSuccess()
          Modal.destroyAll()
        } else {
          message.error(res.message)
        }
      })
    })
  }
  const accountTypeRender = (menu) => {
    const handleSelected = (item) => {
      formRef.current.setFieldValue('categoryId', item.id)
      setSelectedValue(item.id)
      setOpen(false)
    }

    return (
      <ul className="select-popup-list">
        {
          selectList.map(item => {
            return <li key={item.id} onClick={() => handleSelected(item)} className={classnames({'active': item.id === selectedValue})}><Icon path={item.icon} width="20" height="20" fill="#333" />{item.name}</li>
          })
        }
      </ul>
    )
  }


  return (
    <>
      <div className="create-account-modal my-modal">
        <div className="modal-header">
          <div className="modal-title">添加账户</div>
          <i className="modal-close-btn" onClick={() => onClose()}></i>
        </div>
        <div className="modal-main">
          <Form
            name="wrap"
            ref={formRef}
            className="form-wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            wrapperCol={{ flex: 1 }}
            colon={false}
            initialValues={{
              name: '',
              amount: '',
              totalAmount: '',
              categoryId: selectedValue,
              assetStatStatus: true,
              billDate: billDate,
              dueDate: dueDate
            }}
          >
            <div style={{ display: 'flex', gap: 16 }}>
              <div style={{ flex: 1 }}>
                <Form.Item label="账户名称" name="name" rules={[{ required: true, message: '请输入账户名称' }]}>
                  <Input placeholder="请输入账户名称" />
                </Form.Item>
              </div>
              <div style={{ flex: 1 }}>
                <Form.Item label="备注信息" name="notes">
                  <Input placeholder="请输入备注信息" />
                </Form.Item>
              </div>
            </div>
            {
              props.id !== '2' ? (
                <Form.Item label="账户初始金额" name="amount">
                  <Input prefix="￥" placeholder='0' suffix="RMB" />
                </Form.Item>
              ) : (
                <div style={{ display: 'flex', gap: 16 }}>
                  <div style={{ flex: 1 }}>
                    <Form.Item label="已使用金额" name="amount">
                      <Input prefix="￥" placeholder='0' suffix="RMB" />
                    </Form.Item>
                  </div>
                  <div style={{ flex: 1 }}>
                    <Form.Item label="信用额度" name="totalAmount">
                      <Input prefix="￥" placeholder='0' suffix="RMB" />
                    </Form.Item>
                  </div>
                </div>
              )
            }
            <Form.Item label="账户类型" name="categoryId" rules={[{ required: true, message: '请输入账户类型' }]}>
              <Select
                open={open}
                options={selectList}
                fieldNames={{ label: 'name', value: 'id', key: 'id' }}
                onDropdownVisibleChange={(visible) => setOpen(visible)}
                dropdownRender={accountTypeRender}
                placeholder="请输入账户类型"
              />
            </Form.Item>
            {
              props.id === '2' && (
                <div style={{ display: 'flex', gap: 16 }}>
                  <div style={{ flex: 1 }}>
                    <Form.Item label="账单日" name="billDate">
                      <DayPicker value={billDate} placeholder="请选择账单日" onChange={(value) => setBillDate(value)} />
                    </Form.Item>
                  </div>
                  <div style={{ flex: 1 }}>
                    <Form.Item label="还款日" name="dueDate">
                      <DayPicker value={dueDate} placeholder="请选择还款日" onChange={(value) => setDueDate(value)} />
                    </Form.Item>
                  </div>
                </div>
              )
            }
            <Form.Item name="assetStatStatus" valuePropName="checked" className="no-label" label="" colon={false}>
              <Checkbox>计入资产统计</Checkbox>
            </Form.Item>
          </Form>
        </div>
        <div className="modal-footer">
          <Button onClick={() => onClose()}>取消</Button>
          <Button type="primary" onClick={() => onSubmit()}>确定</Button>
        </div>
      </div>
    </>
  )
}

export default CreateAccountModal;